<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="menu">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
</body>
    <script>
        /* var lis=document.getElementsByTagName('li');
        for(var i=0;i<lis.length;i++){
            lis[i].index=i;
            lis[i].onclick=function(e){
                //this执行当前点击的li的对象
                console.log('li添加事件'+this.index);
                this.style.color='pink';
                lis[this.index].style.color='green';
            }
        } */

        //事件委托:原给子元素设置相同事件,现在设置给父元素,就叫事件委托(事件代理)
        var menu=document.getElementsByClassName('menu')[0];
        menu.onclick=function(e){
            console.log('触发点击');
            //获取当前事件对象
            console.log(e.target);
            //当前事件对象
            console.log(e.srcElement);

            //e.target.style.color='pink';//这两种都可改变
            e.srcElement.style.color='pink';

            //获取绑定对象
            console.log(e.currentTarget);
        }
    </script>
</html>